<template>
	<view class="page_content">
		<canvas canvas-id="poster" style="width: 92vw; height: 80vh;">
			<view class="code">
				<view class="logoM">
					<view v-for="(item, index) in logos" :key="index" class="logo">
						<image :src="urlDomain + item.url"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="qr">
					<view class="title">扫码付款</view>
					<view class="tips">扫码成功后尊享日夜购公排回馈</view>
					<view class="qrcode">
						<view style="width: 160px; height: 154px;">
							<canvas canvas-id="qrcode" style="width: 150px; margin: 10rpx auto;"></canvas>
						</view>
					</view>
				</view>
				<view class="use">
					<image :src="urlDomain+'crmebimage/presets/logo_big.png'"></image>
					<view>助力实体 | 回馈消费</view>
					<view>
						<view class="iconfont icon-tel"></view>
						<view>400 888 2314</view>
					</view>
				</view>
			</view>
		</canvas>	
		<view class="downLoad">
			<image :src="urlDomain+'crmebimage/presets/download.png'" @click="downloadCode"></image>
			<view>点击下载收款码</view>
		</view>
		
		<view v-if="posterShow">
			<view class="staorder-overlay" @click="posterShow=false"></view>
			<image :src="posterImg" class="posterImg"></image>
		</view>
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import UQrcode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				shopInfo: JSON.parse(this.$Cache.get('shopInfo')),
				logos: [
					{name: '微信支付', url: 'crmebimage/presets/wxpay.png'},
					{name: '支付宝支付', url: 'crmebimage/presets/Alipay.png'},
					{name: '云闪付', url: 'crmebimage/presets/yunsf.png'},
					{name: '花呗', url: 'crmebimage/presets/huabei.png'},
				],
				posterShow: false,
				posterImg: ''
			}
		},
		onShow() {
			this.createQrCode();
		},
		methods: {
			createQrCode() {
				UQrcode.make({
					canvasId: 'qrcode',   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: '一个测试用的二维码',  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 150,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {}
				});
			},
			downloadCode() {
				var ctx = uni.createCanvasContext('poster', this);
				let that = this;
				console.log('正在绘制')
				ctx.draw(false,(()=> {
					setTimeout(() => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						fileType: 'png',
						canvasId: 'poster',
						quality: 0.6,
						success: res => {
							console.log(res.tempFilePath);
							that.posterImg = res.tempFilePath;
							that.posterShow = true;
							return;
							
							uni.getImageInfo({
								src: res.tempFilePath,
								success: function(sres) {
									console.log('图片信息', sres.path);
									uni.saveImageToPhotosAlbum({
										filePath: sres.path,
										// 保存成功，直接给出提示
										success: (res) => {
											uni.showModal({
												title: '提示',
												content: "已保存到本地相册，请打开相册扫描",
												showCancel: false,
												confirmText: "好的"
											})
										},
										// 保存失败，判断是否授权，未授权则调用授权，否则弹出失败信息
										fail(err) {
											console.error(err);
											if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
												"saveImageToPhotosAlbum:fail authorize no response" || err.errMsg ===
												"saveImageToPhotosAlbum:fail auth denied") { // 没有授权，重新授权，兼容iso和Android
												uni.showModal({
													title: '授权提示',
													content: "是否允许获取保存相册权限",
													success: (res) => {
														if (res.confirm) { // 点击确定，则调用相册授权
															uni.openSetting({
																success(settingdata) {
																	if (settingdata.authSetting[
																			"scope.writePhotosAlbum"
																		]) {
																		console.log(
																			"获取权限成功，再次点击图片保存到相册"
																		)
																		uni.showToast({
																			title: '授权成功，请重试哦~'
																		});
																	} else {
																		console.log("获取权限失败")
																		uni.showToast({
																			title: '请确定已打开保存权限',
																			icon: "none"
																		});
																	}
																}
															})
														}
													}
												})
											} else if (err.errMsg === "saveImageToPhotosAlbum:fail file not found" ||
												err.errMsg ===
												"saveImageToPhotosAlbum:fail file not exists" || err.errMsg ===
												"saveImageToPhotosAlbum:fail get file data fail"
											) { // 无图片，则提示
												uni.showToast({
													title: '暂无图片',
													icon: "none"
												});
											}
										}
									})
								}
							});
						}
					}, this)
					}, 3500)
				})());
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content{
		height: 100vh;
		background-color: #F8FBFF;
		padding: 22rpx 32rpx 0 32rpx;
	}
	.code{
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 32rpx 0;
		
		.logoM {
			display: flex;
			justify-content: center;
			
			.logo{
				flex: 1;
				text-align: center;
				align-items: center;
				
				image{
					width: 76rpx;
					height: 64rpx;
				}
			}
		}
		
		.qr{
			background-color: #4484FF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			align-items: center;
			padding: 40rpx 0 ;
			margin-top: 30rpx;
			
			.title{
				font-size: 44rpx;
				color: #fff;
				font-weight: 500;
			}
			
			.tips{
				font-size: 24rpx;
				color: #fff;
				font-weight: 400;
			}
			
			.qrcode{
				background-color: #fff;
				border-radius: 40rpx;
				margin-top: 20rpx;
			}
		}
		
		.use{
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			align-items: center;
			color: #8C9BA5;
			margin-top: 20rpx;
			
			image{
				width: 200rpx;
				height: 112rpx;
			}
		}
	}
	
	.downLoad{
		margin-top: 70rpx;
		font-size: 24rpx;
		color: #6F7C85;
		text-align: center;
		
		image{
			width: 88rpx;
			height: 88rpx;
		}
	}
	
	.staorder-overlay{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 13;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.4;
	}
	
	.posterImg {
		z-index: 99 !important;
		background: #fff !important;
		opacity: 1 !important;
		position: fixed;
		top: 0;
		width: 92vw;
	}
	
</style>
